<template>
  <div class="warn-shiplist-container">
    <div class="list-header">
      <div class="left" @click="switchWarnShipList">
        <span class="iconfont icon-ship"></span>
        <span>告警船舶</span>
        <span>{{ shipList.length }}艘</span>
      </div>
      <div class="right">
        <span>只看告警船舶</span>
        <el-switch
          :value="onlyShowWarnShip"
          active-color="#004AAA "
          @change="onlyShowWarnShipChange"
        ></el-switch>
      </div>
    </div>

    <div v-if="listShow" class="list-content">
      <div
        v-for="(item, index) in shipList"
        :key="item.id"
        class="list-item"
        @click="shipClick(item)"
      >
        <div style="width: 5%">{{ index + 1 }}</div>
        <div style="width: 15%">
          <el-tooltip :content="item.shipName" placement="top">
            <span>{{ item.shipName }}</span>
          </el-tooltip>
        </div>
        <div style="width: 10%">
          <el-tooltip :content="item.voyageStatus" placement="top">
            <span>{{ item.voyageStatus }}</span>
          </el-tooltip>
        </div>
        <div style="width: 25%">
          <el-tooltip :content="getNaviInfo(item)" placement="top">
            <span>{{ getNaviInfo(item) }}</span>
          </el-tooltip>
        </div>
        <div style="width: 35%">
          <el-tooltip :content="getCargoInfo(item)" placement="top">
            <span>{{ getCargoInfo(item) }}</span>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
import { queryWarnShips } from "@/api/ship";
const { mapState } = createNamespacedHelpers("user");
export default {
  props: {
    onlyShowWarnShip: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      listShow: false,
      shipList: [],
      warnShipIds: [],
    };
  },
  computed: {
    ...mapState(["tenantId"]),
   
  },
  mounted() {
    this.getWarnShipList();
  },
  methods: {
    shipClick(item) {
      this.$emit("ship-click", item);
    },
    getCargoInfo(shipInfo) {
      let cargoInfo = "";
      if (shipInfo.cargoName) {
        cargoInfo += shipInfo.cargoName;
      }
      if (shipInfo.cargoWeight) {
        cargoInfo += shipInfo.cargoWeight + "吨";
      }
      if (!cargoInfo) {
        cargoInfo = "----";
      }
      return cargoInfo;
    },
    getNaviInfo(shipInfo) {
      return shipInfo.departurePort && shipInfo.destinationPort
        ? shipInfo.departurePort + "-" + shipInfo.destinationPort
        : "----";
    },
    getWarnShipList() {
      queryWarnShips({
        superviseTenantId:this.tenantId,
        warningFlag: true

      }).then((res) => {
        if (res.result && res.result.length > 0) {
          this.shipList = res.result;
          this.warnShipIds = this.shipList.map((val) => {
            return val.shipId;
          });

          this.$emit("ship-loaded", this.warnShipIds);
        }
      });
      // return new Promise((resolve, reject) => {
      //   const list = [];
      //   for (let index = 0; index < 5; index++) {
      //     list.push({
      //       id: "10000" + index,
      //       name: "船舶" + (index + 1),
      //       status: "在航",
      //       naviInfo: "青岛-上海",
      //       goods: "煤炭10吨",
      //     });
      //   }
      //   resolve({
      //     data: list,
      //   });
      // });
    },
    switchWarnShipList() {
      // this.listShow = !this.listShow;
      // if (this.listShow) {
      this.$emit("on-expanded", this.shipList);
      // }
    },
    // unExpandWarnShipList() {
    //   this.listShow = false;
    // },
    onlyShowWarnShipChange(val) {
      this.$emit("update:onlyShowWarnShip", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.warn-shiplist-container {
  width: 450px;
  box-shadow: 0px 2px 6px 0px rgba(64, 100, 197, 0.35);
  border-radius: 3px;
  background: #ffffff;
  padding: 0 13px;
  .list-header {
    height: 40px;

    // padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        // color: #004aaa;
        color: #c95353;
        margin-right: 10px;
        line-height: 18px;
        &:first-child {
          font-size: 16px;
        }
      }
    }
    .right {
      font-size: 14px;
      color: #333333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:first-child {
        line-height: 18px;
        margin-right: 12px;
      }
    }
  }
  .list-content {
    border-top: 1px solid #d8d8d8;
    padding: 0px 20px 20px 20px;
    max-height: 500px;
    overflow: auto;
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }
    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
    &::-webkit-scrollbar {
      width: 6px;
      height: 10px;
    }

    .list-item {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      margin-top: 20px;
      div {
        // width: 90px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
